import React from 'react';
import { Row, Col, Cascader, Button, DatePicker, Timeline } from 'antd';
import { formatCascader } from '../../common/common';
import { connect } from 'dva';
import { dateFormat } from '../../utils/util';
import moment from 'moment';
import './index.css';
const { RangePicker } = DatePicker;
let id = '';

class History extends React.Component { 
    render() {
        id = this.props.id;
        return (
            <div >
                <HistoryForm queryHistory={this.props.queryHistory} areaInfo={this.props.areaInfo}/>
                <div style={{marginTop: '10px'}} >
                {
                    this.props.historyList.length > 0 ? 
                    
                    <Timeline>
                         <div className="content_">
                        {
                            this.props.historyList.map(item => 
                            
                                <Timeline.Item color="red" key={item.fId}>
                                    <p>老人姓名：{item.fName}</p>
                                    <p>老人电话：{item.fPhone}</p>
                                    <p>所属社区：{item.fStreetCommunity}</p>
                                    <p>服务类型：{item.fContent}</p>
                                    {
                                        item.fState === '795b6e37d8fa45e489e8e8709865a131' ? <p>服务时间：服务中</p> : (item.fState === 'a3eec264faeb4d95843ce0bd6268a162') ? <p>服务时间：已预约</p> : <p>服务时间：{dateFormat(item.fQuantumTimeBegin)}~{dateFormat(item.fQuantumTimeEnd)}</p>
                                    }
                                </Timeline.Item>
                            
                            )
                        }
                           </div>
                    </Timeline>
                  
                    : <p style={{textAlign: 'center',marginTop: '30%'}}>暂无数据</p>
                }
                </div>
            </div>
        )
    }
} 

class HistoryForm extends React.Component {
    timeDesc = [];
    area = [];
    onChange = (value) => {
        this.area = value;
    }
    dateChange = (value) => {
        this.timeDesc = value;
    }
    query = () => {
        let param = {
            fQuantumTimeBegin: this.timeDesc.length > 0 ? this.timeDesc[0] : null,
            fQuantumTimeEnd: this.timeDesc.length > 0 ? this.timeDesc[1] : null, 
            fServiceStaffId: id,
            fStreetCommunityId: this.area.length > 0 ? this.area[this.area.length - 1] : null
        };
        this.props.queryHistory(param);
    }
    disabledDate = (current) => {
        return current > moment().endOf('day');
    }
    render() {
        return(
            <Row gutter={16}>
                <Col span={10}>
                    <Cascader options={formatCascader(this.props.areaInfo, 'fId', 'fName', 'children')} onChange={this.onChange} changeOnSelect placeholder="请选择..." style={{width: '100%'}}/>
                </Col>
                <Col span={10}>
                <RangePicker disabledDate={this.disabledDate} onChange={this.dateChange} style={{width:'100%'}}/>
                </Col>
                <Col span={4}>
                <Button type="primary" onClick={this.query}> 查询 </Button>
                </Col>
            </Row>
        )
    }
}

export default connect((state) => ({
	areaInfo: state.example.areaInfo
}))(History);